<template>
    <div class="page-home">
        <div class="hl">
            <div class="module">
                <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">
                    <div class="mitem">
                        <el-divider content-position="left">左图配置</el-divider>
                        <el-form-item label="图标" prop="ad_left.img">
                            <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
                                token: $pinia.state.value.store.token
                            }" :show-file-list="false" :on-success="handleImgSuccess1">
                                <img v-if="form.ad_left.img" :src="$imgUrl + form.ad_left.img" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                                <el-icon v-if="form.ad_left.img" class="img-close-icon"
                                    @click.stop="form.ad_left.img = ''">
                                    <CircleClose />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="标题" prop="ad_left.title">
                            <el-input v-model="form.ad_left.title" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="副标题" prop="ad_left.sub_title">
                            <el-input v-model="form.ad_left.sub_title" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="跳转链接" prop="ad_left.url">
                            <el-input v-model="form.ad_left.url" placeholder="请输入" clearable />
                        </el-form-item>
                    </div>
                    <div class="mitem">
                        <el-divider content-position="left">右上图配置</el-divider>
                        <el-form-item label="图标" prop="ad_right_1.img">
                            <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
                                token: $pinia.state.value.store.token
                            }" :show-file-list="false" :on-success="handleImgSuccess2">
                                <img v-if="form.ad_right_1.img" :src="$imgUrl + form.ad_right_1.img" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                                <el-icon v-if="form.ad_right_1.img" class="img-close-icon"
                                    @click.stop="form.ad_right_1.img = ''">
                                    <CircleClose />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="标题" prop="ad_right_1.title">
                            <el-input v-model="form.ad_right_1.title" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="副标题" prop="ad_right_1.sub_title">
                            <el-input v-model="form.ad_right_1.sub_title" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="跳转链接" prop="ad_right_1.url">
                            <el-input v-model="form.ad_right_1.url" placeholder="请输入" clearable />
                        </el-form-item>
                    </div>
                    <div class="mitem">
                        <el-divider content-position="left">右下图配置</el-divider>
                        <el-form-item label="图标" prop="ad_right_2.img">
                            <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
                                token: $pinia.state.value.store.token
                            }" :show-file-list="false" :on-success="handleImgSuccess3">
                                <img v-if="form.ad_right_2.img" :src="$imgUrl + form.ad_right_2.img" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                                <el-icon v-if="form.ad_right_2.img" class="img-close-icon"
                                    @click.stop="form.ad_right_2.img = ''">
                                    <CircleClose />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="标题" prop="ad_right_2.title">
                            <el-input v-model="form.ad_right_2.title" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="副标题" prop="ad_right_2.sub_title">
                            <el-input v-model="form.ad_right_2.sub_title" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="跳转链接" prop="ad_right_2.url">
                            <el-input v-model="form.ad_right_2.url" placeholder="请输入" clearable />
                        </el-form-item>
                    </div>

                    <div class="mitem">
                        <el-divider content-position="left">个人中心背景</el-divider>
                        <el-form-item label="图标" prop="bg_img">
                            <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
                                token: $pinia.state.value.store.token
                            }" :show-file-list="false" :on-success="handleImgSuccess4">
                                <img v-if="form.bg_img" :src="$imgUrl + form.bg_img" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                                <el-icon v-if="form.bg_img" class="img-close-icon"
                                    @click.stop="form.bg_img = ''">
                                    <CircleClose />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                    </div>

                </el-form>

                <el-button type="primary" @click="save">保存/更新</el-button>
            </div>

        </div>
        <!-- <div class="hr">
            预览
        </div> -->
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const formRef = ref();
const form = reactive({
    ad_left: {
        img: '',
        title: '',
        sub_title: '',
        url: ''
    },
    ad_right_1: {
        img: '',
        title: '',
        sub_title: '',
        url: ''
    },
    ad_right_2: {
        img: '',
        title: '',
        sub_title: '',
        url: ''
    },
    bg_img: ''
})

const rules = {
    'bg_img': [{ required: true, message: '请上传图片', trigger: 'blur' }],
    'ad_left.img': [{ required: true, message: '请上传图片', trigger: 'blur' }],
    'ad_left.title': [{ required: true, message: '请输入标题', trigger: 'blur' }],
    'ad_left.sub_title': [{ required: true, message: '请输入副标题', trigger: 'blur' }],
    'ad_right_1.img': [{ required: true, message: '请上传图片', trigger: 'blur' }],
    'ad_right_1.title': [{ required: true, message: '请输入标题', trigger: 'blur' }],
    'ad_right_1.sub_title': [{ required: true, message: '请输入副标题', trigger: 'blur' }],
    'ad_right_2.img': [{ required: true, message: '请上传图片', trigger: 'blur' }],
    'ad_right_2.title': [{ required: true, message: '请输入标题', trigger: 'blur' }],
    'ad_right_2.sub_title': [{ required: true, message: '请输入副标题', trigger: 'blur' }],
}

const handleImgSuccess1 = (res) => {
    if (res.code == 0) {
        form.ad_left.img = res.data.url
    }
}
const handleImgSuccess2 = (res) => {
    if (res.code == 0) {
        form.ad_right_1.img = res.data.url
    }
}
const handleImgSuccess3 = (res) => {
    if (res.code == 0) {
        form.ad_right_2.img = res.data.url
    }
}
const handleImgSuccess4 = (res) => {
    if (res.code == 0) {
        form.bg_img = res.data.url
    }
}

const id = ref('')
async function save(refForm) {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res = await proxy.$post('SysConfigSave', {
                id: id.value,
                key: 'HOME',
                name: '首页配置',
                state: 1,
                content: JSON.stringify(form)
            })
            if (res.code === 0) {
                getDetail()
                ElMessage({ type: 'success', message: '保存成功' });
            }
        }
    });
}



async function getDetail() {
    let res = await proxy.$post('SysConfigDetail', {
        key: 'HOME'
    }, false)
    if (res.code === 0) {
        let content = res.data.content ? JSON.parse(res.data.content) : {
            ad_left: {
                img: '',
                title: '',
                sub_title: '',
                url: ''
            },
            ad_right_1: {
                img: '',
                title: '',
                sub_title: '',
                url: ''
            },
            ad_right_2: {
                img: '',
                title: '',
                sub_title: '',
                url: ''
            }
        }
        id.value = res.data.id || ''
        Object.assign(form, content);
    }

}


onMounted(() => {
    getDetail()
});

</script>


<style lang="scss" scoped>
.page-home {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;

    .hr {
        width: 375px;

    }

    .hl {
        flex: 1;

        .module {
            padding: 20px;
            padding-top: 0;
        }
    }


}
</style>